<template>
	<view class="reviews" :class="themeName">
		<router-link :to="`/bundle/pages/goods_comment_he/goods_comment_he?id=${goodsId}`">
			<view class="flex row-between reviews-header">
				<view>
					<text class="nr">用户评价</text>
					<text class="xs m-l-10 reviews-rate">好评率{{ comment.goods_rate || '0%' }}</text>
				</view>
				<view class="muted">
					<text class="xs">查看全部</text>
					<u-icon name="arrow-right" />
				</view>
			</view>
		</router-link>
		<view class="reviews-content">
			<template  v-if="comment.comment">
				<view class="flex">
					<u-image width="70" height="70" mode="scaleToFill" border-radius="50%" :src="comment.avatar" />
					<text class="m-l-20">{{ comment.nickname }}</text>
				</view>
				<view class="muted xs m-t-10">
					<text>{{ comment.spec_value_str }}</text>
				</view>
				<view class="m-t-16">{{ comment.comment }}</view>
				<view class="reviews-images flex flex-wrap" v-if="comment.comment_image.length">
					<u-image class="m-r-16 m-t-16" v-for="(item, index) in comment.comment_image" :key="item"
						:src="item" width="160" height="160" mode="scaleToFill" @tap="showCommentImage(index)" />
				</view>
			</template>
			<view v-else class="muted flex row-center xs">
				暂无评价~
			</view>
		</view>
	</view>
</template>

<script type="text/javascript">
	export default {
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
			comment: {
				type: [Object, Array],
				default: () => ({})
			},
			goodsId: {
				type: [Number, String]
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			// 查看评价图片
			showCommentImage(index) {
				// 预览图片
				uni.previewImage({
					urls: this.comment.comment_image,
					current: index,
				})
			},
		},
		computed: {
			
		}
	};
</script>

<style lang="scss" scoped>
	
	.reviews {
		margin-top: 20rpx;
	
		&-header {
			padding: 24rpx;
			background-color: #FFFFFF;
		}
	
		&-content {
			padding: 24rpx;
			border-top: 1px solid $-color-border;
			background-color: #FFFFFF;
	
			.evaluate-images {
				display: flex;
				flex-wrap: wrap;
			}
		}
	
		&-rate {
			@include font_color()
		}
	}
	
</style>
